<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://displaytag.sf.net" prefix="display" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="<c:url value='../assets/css/bootstrap.css' />" >
<link rel="stylesheet" type="text/css" href="<c:url value='../assets/css/jquery-ui.css' />" >
<link rel="stylesheet" type="text/css" href="<c:url value='../assets/css/styles.css' />" >
<script src="../assets/js/lib/jquery-1.8.2.min.js"></script>
<script src="../assets/js/lib/jquery-ui-1.9.1.custom.min.js"></script>
<script src="../assets/js/lib/bootstrap.min.js"></script>
<script src="../assets/js/list.js"></script>
<title>List EMR Clusters</title>
</head>
<body>
    <%@ include file="../../menu.html" %>
    <div class="row-fluid">
        <div class="span2">
        </div>
        <div class="span8" style="margin-top: 60px;">
           <display:table name="emrList" id="row" defaultsort="4" pagesize="6" requestURI="/emr/list.do" defaultorder="descending" class="table table-bordered table-striped table-hover">
           <display:column property="jobFlowId" title="Job Flow ID" sortable="true"/>
           <display:column property="jobFlowName" title="Job Flow Name" sortable="true"/>
           <display:column property="jobFlowStatus" title="Job Flow Status" sortable="true"/>
           <display:column property="jobCreationTime" title="Job Flow Creation Date" sortable="true"/>
           <display:column title="Actions">
               <div class="btn_actions">
                    <button class="btn btn-link" type="button" data-id="${row.jobFlowId}" data-action="details" title="Job Details">
                        <i class="icon-list-alt"></i>
                    </button>
                    <c:if test="${row.jobFlowStatus=='WAITING'}">
                        <button class="btn btn-link" type="button" data-id="${row.jobFlowId}" data-action="stop" title="Stop">
                            <i class="icon-remove"></i>
                        </button>
                    </c:if>
                </div>
           </display:column>

            <display:setProperty name="paging.banner.first">
                <div class="pagination pagination-centered"><ul><li class="disabled"><span>First</span></li>{0}<li><a href="{4}">Last</a></li></ul></div>
            </display:setProperty>

            <display:setProperty name="paging.banner.full">
                <div class="pagination pagination-centered"><ul><li><a href="{1}">First</a></li>{0}<li><a href="{4}">Last</a></li></ul></div>
            </display:setProperty>

            <display:setProperty name="paging.banner.last">
                <div class="pagination pagination-centered"><ul><li><a href="{1}">First</a></li>{0}<li class="disabled"><span>Last</span></li></ul></div>
            </display:setProperty>

            <display:setProperty name="paging.banner.page.link">
                <li><a href="{1}">{0}</a></li>
            </display:setProperty>

            <display:setProperty name="paging.banner.page.selected">
                <li class="disabled"><span>{0}</span></li>
            </display:setProperty>

            <display:setProperty name="paging.banner.all_items_found" value=""/>
            <display:setProperty name="paging.banner.some_items_found" value=""/>
            <display:setProperty name="paging.banner.one_item_found" value=""/>
            <display:setProperty name="paging.banner.no_items_found" value=""/>
            <display:setProperty name="paging.banner.onepage" value=""/>
            <display:setProperty name="paging.banner.page.separator" value=""/>
            <display:setProperty name="css.th.ascending" value="asc"/>
            <display:setProperty name="css.th.descending" value="desc"/>
            <display:setProperty name="paging.banner.placement" value="bottom"/>
           </display:table>
        </div>
        <form id="terminate" name="terminate" action="/emr/terminate.do" method="POST">
            <input type="hidden" name="jobFlowId" id="jobFlowId"/>
        </form>
    </div>
    <div id="dialog-confirm" title="Stop EMR Cluster" class="hide">
      <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>Are you sure?</p>
    </div>
    <div id="modal-detail">
        <div class="msg"></div>
    </div>
</body>
</html>
